@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';
@import './dynamic-form.scss';

body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

label {
  font-weight: 700;
}

html {
  height: 100%;
  box-sizing: border-box;
}

#app {
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

div:focus {
  outline: none;
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

// 添加全局动画相关样式
* {
  // 添加硬件加速以提高动画性能
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

// 主要动画缓动函数
$ease-in-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
$ease-out-back: cubic-bezier(0.23, 1, 0.32, 1);

// 通用动画类
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s $ease-in-out-quint;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.fade-transform-enter-active,
.fade-transform-leave-active {
  transition: all 0.3s $ease-in-out-quint;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all 0.3s $ease-in-out-quint;
}

.breadcrumb-enter,
.breadcrumb-leave-to {
  opacity: 0;
  transform: translateX(20px);
}

.breadcrumb-move {
  transition: all 0.3s $ease-in-out-quint;
}

// 增强侧边栏动画效果
.hideSidebar {
  .sidebar-container-wrapper {
    transition: all 0.4s $ease-out-back !important;
  }
}

.openSidebar {
  .sidebar-container-wrapper {
    transition: all 0.4s $ease-out-back !important;
  }
}

// 悬停效果增强
.hover-effect {
  transition: all 0.3s $ease-in-out-quint !important;
}

// 按钮动画增强
.el-button {
  transition: all 0.3s $ease-in-out-quint !important;
}

// 菜单项动画增强
.el-menu-item,
.el-submenu__title {
  transition: all 0.3s $ease-in-out-quint !important;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

// 子菜单动画增强
.el-submenu .el-menu {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: all 0.3s $ease-in-out-quint !important;
}